<template>
    <div id="app">
        <toolbar> </toolbar>
        <router-view class="main-view view" keep-alive transition="page-swipe" transition-mode="out-in"> </router-view>
    </div>
</template>

<script>
    import Toolbar from './components/Toolbar';

    export default {
        components: {
            Toolbar
        }
    }
</script>

<style lang="scss">
    html, body{
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        display: flex;
    }

    #app {
        height: 100%;
        display: flex;
        flex:1;
        overflow: hidden;
        background-color: #1a231f;
    }
    .main-view{
        display: flex;
    }
    .view, .page-swipe-transition {
        transition: all .3s ease;
    }
    .page-swipe-enter, .page-swipe-leave {
        opacity: 0;
        transform: translate3d(10%, 10px, 0);
    }
</style>
